<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="小涛博客的404页" />
    <meta name="keywords" content="404页" />
    <meta name="baidu-site-verification" content="H91h9G7RRd" />
    <meta name="author" content="shixtao" />
    <title>404</title>
    <style>
      .error-page {
        height: 100%;
        display: flex;
      }

      .error-page .pic-404 {
        text-align: center;
        width: 60%;
        padding: 50px;
      }

      .error-page .pic-404 .pic-404__parent {
        width: 600px;
      }

      .error-page .notFound {
        padding: 150px 0;
        overflow: hidden;
      }

      .error-page .notFound span {
        line-height: 60px;
        font-size: 18px;
        color: #8b7b8b;
      }

      .error-page .notFound span .link {
        color: #5cacee;
        font-size: 20px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="error-page">
      <div class="pic-404">
        <img src="/public/404_images/404.png" class="pic-404_parent" alt="404" />
      </div>
      <div class="notFound">
        <span>找不到页面了，<span id="time">5</span>秒后<a href="/">返回首页</a></span>
      </div>
    </div>
  </body>

  <script>
    var countTime = 5;
    var time = document.getElementById('time');
    function fn() {
      if (countTime === 0) {
        location.href = '/';
      } else {
        time.innerHTML = countTime;
        countTime--;
      }
    }
    fn();
    setInterval(fn, 1000);
  </script>
</html>
